<template>
  <q-page class="q-pa-md">
    <q-btn class="float-right" color="primary" icon="arrow_back" outline title="返回" to="/" />
    <div class="q-pb-md text-h5">库存查询</div>
    <div class="row q-col-gutter-sm q-mb-sm">
      <div class="col-12 row q-col-gutter-sm q-mx-none">
        <div class="searchbar-label">储位</div>
        <div class="col">
          <easy-input @focus="fx.ui.select" v-model="fpsReq.loc" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)"/>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-sm q-mx-none">
        <div class="searchbar-label">栈板</div>
        <div class="col">
          <easy-input @focus="fx.ui.select" v-model="fpsReq.lpn" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)"/>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-sm q-mx-none">
        <div class="searchbar-label">批号</div>
        <div class="col">
          <easy-input @focus="fx.ui.select" v-model="fpsReq.lot" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)"/>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-sm q-mx-none">
        <div class="searchbar-label">料号</div>
        <div class="col">
          <easy-input @focus="fx.ui.select" v-model="fpsReq.sku" :readonly="listDataLoadingState" @keyup.enter="loadListData(2)"/>
        </div>
      </div>
      <div class="col-12">
        <q-btn class="full-width" color="primary" label="查询" @click="loadListData(2)"
          :disable="listDataLoadingState || (!fpsReq.lpn && !fpsReq.loc && !fpsReq.lot && !fpsReq.sku)" />
      </div>
    </div>
    <!--列表部分-->
    <div class="shadow-2">
      <q-table :columns="fpsInfo.columnsInfo" :rows="$d.tableData" v-model:pagination="fpsInfo.paginationInfo"
        dense flat :hide-pagination="true" separator="cell" :loading="listDataLoadingState" @request="fpsAssist.onDataTableRequest">
        <template v-slot:no-data>
          <span class="full-width text-center"> <q-icon name="error_outline" /> 无数据 </span>
        </template>
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
            :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
            @go-to-page="fpsNav.gotoPage" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'InvLocListStd'
}
</script>

<script lang="ts" setup>

import {reactive, ref} from 'vue'
import {GetInvLocListReq} from '../../defs/invLocList'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {GetInvLocResp, WmInvLoc} from '@njt/wms/defs/inventory/invloc'

const fx = $f
let listDataLoadingState = ref(false)

const $d = reactive({
  tableData: [] as WmInvLoc[]
})

const columnsDefine: ColumnInfo[] = [
  {
    label: '批号',
    name: 'lot',
    field: 'lot',
    align: 'left'
  },
  {
    label: '外部批号',
    name: 'vLot',
    field: 'vLot',
    align: 'left'
  },
  {
    label: '库存量',
    name: 'qty',
    field: 'qty',
    align: 'left'
  },
  {
    label: '已配量',
    name: 'qtyAllocated',
    field: 'qtyAllocated',
    align: 'left'
  },
  {
    label: '已拣量',
    name: 'qtyPicked',
    field: 'qtyPicked',
    align: 'left'
  },
  {
    label: '仓库',
    name: 'whName',
    field: 'whName',
    align: 'left'
  },
  {
    label: '储区',
    name: 'zoneName',
    field: 'zoneName',
    align: 'left'
  },
  {
    label: '储位',
    name: 'loc',
    field: 'loc',
    align: 'left'
  },
  {
    label: '栈板(箱号)',
    name: 'lpn',
    field: 'lpn',
    align: 'left'
  },
  {
    label: '货主',
    name: 'storerAbbrName',
    field: 'storerAbbrName',
    align: 'left'
  },
  {
    label: '料号',
    name: 'sku',
    field: 'sku',
    align: 'left'
  }
]


let fpsReq:GetInvLocListReq = reactive({
  loc: null,
  lpn: null,
  lot: null,
  sku: null,
  pageNo: 1,
  pageSize: 40,
  isDescending: false,
  orderBy: null
})

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  if (!!fpsReq.lpn || !!fpsReq.loc || fpsReq.lot || fpsReq.sku) {
    listDataLoadingState.value = true
    $f.axios
      .get<GetInvLocResp>('/wms/inv/inventory/get-inv-loc-list', { params: fpsReq })
      .then((resp) => {
        fpsAssist.handleGenericFpsResp(resp.data)
        $d.tableData = resp.data.invLocList
        fpsAssist.saveFpsReq(fpsReq)
      })
      .catch((err) => {
        $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
      })
      .finally(() => {
        listDataLoadingState.value = false
      })
  }
}


const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/wms/work/loc', null,
  null,
  null,
  fpsReq, columnsDefine,
  null,
  loadListData)

</script>

<style scoped>

</style>
